<template>
	<view class="content">

		<!-- 用户头像header -->
		<view class='member-top'>
			<image class='bg-img'></image>
			<view class='member-top-c'>
				<template v-if="hasLogin">
					<image class='user-head-img' mode="aspectFill" :src='userInfo.avatar' 
					@click="navigateToHandle('/pages/member/setting/user_info/index')"></image>
					
					<view class="headerView1">
						<view class='user-name'>{{ userInfo.nickname }}</view>
						<view class="grade" v-if="userInfo.mobile">
							{{userInfo.mobile}}
					</view>
					
					
					</view>
				</template>
				
			<view class="mainRight" @click="navigateToHandle('/pages/myCenter/myTeamList/myTeamList')">
				<button >我的拼团</button>
			</view>

			</view>
			


			
		</view>
		

		<!-- 订单列表信息 -->
		<view class="cellBox" style="display: flex;flex-direction: row;">
		
	
			<view style="width: 33%;display: flex;flex-direction: column;"  @click="navigateToHandle('/pages/member/balance/details')">
				<text class='member-item-text'>余额</text>
				<text class='member-item-text2'>{{userInfo.balance}}</text>
			</view>
			
			<view style="width: 33%;display: flex;flex-direction: column;" @click="navigateToHandle('/pages/myCenter/myTeamList/myFans')">
				<text class='member-item-text'>粉丝</text>
				<text class='member-item-text2'>{{userInfo.fans_num}}</text>
			</view>
			 
			<view style="width: 33%;display: flex;flex-direction: column;" @click="navigateToHandle('/pages/myCenter/myTeamList/myBonusRecord')">
				<text class='member-item-text'>奖金</text>
				<text class='member-item-text2'>{{userInfo.bonus}}</text>
			</view>
	
		</view>

	
	<view class="cellBox" style="margin-top: 30upx;">

	
	<view  v-for="(item, index) in contentArr" :key="index">
	<!-- 	<view class='cell-item-hd' @click="navigateToHandle(item.router)">
			<image class='cell-hd-icon' :src='item.icon'></image>
			<view class='cell-hd-title'>{{ item.name }}</view>
		</view>
		<view class='cell-item-ft'>
			<image class='cell-ft-next icon' src='/static/image/right.png'></image>
		</view> -->
		
		
		<view class='cellOneLine' @click="navigateToHandle(item.router)">
			<view class='cellOneLineLeft'>
				<image mode="scaleToFill" class='iconimageLeft' :src='item.icon'></image>
				<view class='iconleftHint'>{{ item.name }}</view>
			</view>
			
			<view class="rightViewSmallBox">
				
				<!-- <view class='onelinerightTextView'>{{ userInfo.balance }}</view> -->
				
				<image class='cell-ft-next icon' src='/static/image/right.png'></image>
				
				
			</view>
			
				
		</view>
		
		
		<view style="width: 100%;height: 2upx;background-color: #eeeeee;"></view>
		
		
	</view>
	
	

</view>
	
	
	
	
	<view class="btttonView" >
		<button class="bt-style" @click="quitLogin()">退出登录</button>
		
		<!-- <view class="loginView" @click="loginHandler">注册</view> -->
	</view>
	
<!-- 	<view class='cell-item right-img' @click="orderNavigateHandle('../order/orderlist')">
		<view class='cell-item-hd'>
			<image class='cell-hd-icon' src='/static/image/userorder.png'></image>
			<view class='cell-hd-title'>我的订单</view>
		</view>
		<view class='cell-item-ft'>
			<image class='cell-ft-next icon' src='/static/image/right.png'></image>
		</view>
	</view> -->
	

	
	
	</view>
</template>


<script>
	const delay = (function() {
		let timer = 0
		return function(callback, ms) {
			clearTimeout(timer)
			timer = setTimeout(callback, ms)
		}
	})()
	
	import {isMemberWeb} from '@/config/config.js'
	import jihaiCopyright from '@/components/jihai-copyright/jihaiCopyright.vue'
	import {
		checkLogin
	} from '@/config/mixins.js'
	export default {
		components: {
			jihaiCopyright
		},

		mixins: [checkLogin],
		data() {
			return {
				open_id: '',
				hasLogin: false,
				userInfo: {}, // 用户信息
				kefupara: '', //客服传递资料
				afterSaleNums: 0,
				isClerk: false,
				isMemberWeb : isMemberWeb,
				alipayNoLogin: true,
				alipayName: '',
				alipayAvatar: '',
				config: '', //配置信息
				orderItems: [{
						name: '待付款',
						icon: '/static/image/my/daifukuan.png',
						nums: 0
					},
					{
						name: '待发货',
						icon: '/static/image/my/daifahuo.png',
						nums: 0
					},
					{
						name: '待收货',
						icon: '/static/image/my/daishouhuo.png',
						nums: 0
					},
					{
						name: '待评价',
						icon: '/static/image/my/daipingjia.png',
						nums: 0
					}
				],
				
				contentArr :[
					{
						name: '我要注册',
						icon: '/static/image/my/userNavIcon_07.png',
						router: '/pages/classify/index2'
					},{
						name: '自动复投产品',
						icon: '/static/image/my/userNavIcon_07.png',
						// router: '/pages/share/jump?scene=1-3705-'
						router: '/pages/myCenter/myTeamList/reselectGood'
					},{
						name: '转账',
						icon: '/static/image/my/userNavIcon_08.png',
						router: '/pages/myCenter/myTeamList/transferAccounts'
					},{
						name: '账户查询',
						icon: '/static/image/my/userNavIcon_09.png',
						router: '/pages/myCenter/myTeamList/myAccountList',
					
					},{
						name: '填写银行卡',
						icon: '/static/image/my/userNavIcon_10.png',
						router: '/pages/member/balance/bankcard',
				
					},{
						name: '提现申请',
						icon: '/static/image/my/userNavIcon_11.png',
						router: '/pages/member/balance/withdraw_cash'
					},{
					// 	name: '修改姓名',
					// 	icon: '/static/image/my/userNavIcon_12.png',
					// 	router: '/pages/member/setting/user_info/index'
					// },{
					// 	name: '修改手机号',
					// 	icon: '/static/image/my/userNavIcon_12.png',
					// 	router: '/pages/myCenter/myTeamList/modifyPhone'
					// },{
						name: '修改登录密码',
						icon: '/static/image/my/userNavIcon_13.png',
						router: '/pages/member/setting/user_info/password'
					},
				],
				
				
				utilityMenus: {
					distribution: {
						name: '分销中心',
						icon: '/static/image/distribution.png',
						router: '../distribution/user',
						unshowItem: false
					},
					coupon: {
						name: '我的优惠券',
						icon: '/static/image/ic-me-coupon.png',
						router: '../coupon/index',
						unshowItem: false,
						nums: 0
					},
					balance: {
						name: '我的余额',
						icon: '/static/image/ic-me-balance.png',
						router: '../balance/index',
						unshowItem: false
					},
					invoice: {
						name: '我的发票',
						icon: '/static/image/ic-me-invoice.png',
						router: '../invoice/index',
						unshowItem: false
					},
					integral: {
						name: '我的云豆',
						icon: '/static/image/integral.png',
						router: '../integral/index',
						unshowItem: false
					},
					address: {
						name: '地址管理',
						icon: '/static/image/me-ic-site.png',
						router: '../address/list',
						unshowItem: false
					},
					collection: {
						name: '我的收藏',
						icon: '/static/image/ic-me-collect.png',
						router: '../collection/index',
						unshowItem: false
					},
					history: {
						name: '我的足迹',
						icon: '/static/image/ic-me-track.png',
						router: '../history/index',
						unshowItem: false
					},

				},

				order: {
					bargain: {
						name: '砍价记录',
						icon: '/static/image/me-ic-sendout.png',
						router: '../bargain/list',
						unshowItem: false
					},
					invite: {
						name: '邀请好友',
						icon: '/static/image/ic-me-invite.png',
						router: '../invite/index',
						unshowItem: true
					},
					setting: {
						name: '系统设置',
						icon: '/static/image/me-ic-set.png',
						router: '../setting/index',
						unshowItem: false
					}
				},
				list: 2,
				suTipStatus: false,
				isNavto: false
			}
		},
		onShow() {
			
			
			if (!this.$db.get('userToken') && isMemberWeb) {
				
				
				
				this.checkIsLogin()
				this.isNavto=false;
				return
					
					
			
			}
			
			
			
			this.isNavto = true;
			this.initData()
		},
		methods: {
			
			// 购物车页面跳转
			redirectCart() {
				uni.switchTab({
					url: '/pages/cart/index/index'
				});
			},
			
			quitLogin() {
				this.$common.modelShow('退出', '确认退出登录吗?', () => {
				  this.$db.del('userToken')
				  uni.reLaunch({
				    url: '/pages/member/index/index'
				  })
				})
			},
			
			
		
			
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/choose/index'
				})
			},
			getUserInfo(e) {
				let _this = this
				//return false;
				if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
					_this.$common.errorToShow('未授权')
				} else {
					var data = {
						open_id: _this.open_id,
						iv: e.detail.iv,
						edata: e.detail.encryptedData,
						signature: e.detail.signature
					}
					//有推荐码的话，带上
					var invitecode = _this.$db.get('invitecode')
					if (invitecode) {
						data.invitecode = invitecode
					}
					_this.toWxLogin(data)
				}
			},
			getALICode() {
				let that = this
				uni.login({
					scopes: 'auth_user',
					success: (res) => {
						if (res.authCode) {
							uni.getUserInfo({
								provider: 'alipay',
								success: function(infoRes) {
									if (infoRes.errMsg == "getUserInfo:ok") {
										let user_info = {
											'nickname': infoRes.nickName,
											'avatar': infoRes.avatar
										}
										that.aLiLoginStep1(res.authCode, user_info);
									}
								},
								fail: function(errorRes) {
									that.$common.errorToShow('未取得用户昵称头像信息');
								}
							});
						} else {
							that.$common.errorToShow('未取得code');
						}
					},
					fail: function(res) {
						console.log(res)
						that.$common.errorToShow('用户授权失败my.login');
					}
				});
			},
			getWxCode() {
				let that = this
				uni.login({
					scopes: 'auth_user',
					success: function(res) {
						if (res.code) {
							that.wxLoginStep1(res.code)
						} else {
							this.$common.errorToShow('未取得code')
						}
					},
					fail: function(res) {
						this.$common.errorToShow('用户授权失败wx.login')
					}
				})
			},
			wxLoginStep1(code) {
				this.$api.login1({
					code
				}, res => {
					if (res.status) {
						this.open_id = res.data
					} else {
						this.$common.errorToShow(res.msg, function() {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			},
			aLiLoginStep1(code, user_info) {
				let data = {
					'code': code,
					'user_info': user_info
				}
				this.$api.alilogin1(data, res => {
					this.alipayNoLogin = false;
					if (res.status) {
						this.open_id = res.data.user_wx_id
						//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
						if (!res.data.hasOwnProperty('token')) {
							this.$common.navigateTo('/pages/login/login/index?user_wx_id=' + res.data.user_wx_id);
						} else {
							this.$db.set('userToken', res.data.token)
							this.initData()
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			toWxLogin(data) {
				let _this = this
				_this.$api.login2(data, function(res) {
					if (res.status) {
						//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
						if (typeof res.data.token == 'undefined') {
							uni.redirectTo({
								url: '/pages/login/login/index?user_wx_id=' + res.data.user_wx_id
							})
						} else {
							_this.$db.set('userToken', res.data.token)
							_this.initData()
						}
					} else {
						_this.$common.errorToShow('登录失败，请重试')
					}
				})
			},
			toLogin() {
				this.$common.navigateTo('../../login/login/index1')
			},
			initData() {
				// 获取用户信息
				var _this = this
				//判断是开启分销还是原始推广
				if (this.$store.state.config.open_distribution) {
					this.order.invite.unshowItem = true
				} else {
					this.utilityMenus.distribution.unshowItem = true
					this.order.invite.unshowItem = false
				}
				
				if (this.$db.get('userToken')) {
					this.hasLogin = true
					this.$api.userInfo({}, res => {
						if (res.status) {
							
							console.log(res.data);
							
							_this.userInfo = res.data
							// #ifdef MP-WEIXIN
							//微信小程序打开客服时，传递用户信息
							var kefupara = {}
							kefupara.nickName = res.data.nickname
							kefupara.tel = res.data.mobile
							_this.kefupara = JSON.stringify(kefupara)
							// #endif
							// 获取订单不同状态的数量
							let data = {
								ids: '1,2,3,4',
								isAfterSale: true
							}
							_this.$api.getOrderStatusSum(data, res => {
								if (res.status) {
									_this.orderItems.forEach((item, key) => {
										item.nums = res.data[key + 1]
									})
									_this.afterSaleNums = res.data.isAfterSale ?
										res.data.isAfterSale :
										0
								}
								// console.log(res);
								// this.utilityMenus.coupon.nums = res.data.coupon
							})
							//判断是否是店员
							this.$api.isStoreUser({}, res => {
								this.isClerk = res.flag
							})
						}
					})
				} else {
					this.hasLogin = false
					// #ifdef MP-WEIXIN
					this.getWxCode()
					// #endif
				}
			},
			navigateToHandle(pageUrl) {
				
				console.log(pageUrl)
				
				
				if (!this.hasLogin) {
					if(this.isNavto){
						this.checkIsLogin()
						this.isNavto=false;
						return
					}
					return
				}
				// if (!this.hasLogin) {
				// 	delay(() => {
				// 		return this.checkIsLogin()
				// 	}, 500)
				// 	return
				// }
				
				console.log(pageUrl)
				
				this.$common.navigateTo(pageUrl)
			},
		
		
		},
		computed: {
			// 获取店铺联系人手机号
			shopMobile() {
				return this.$store.state.config.shop_mobile || 0;
			},
			invoice_switch() {
				return this.$store.state.config.invoice_switch || 2;
			},
			store_switch() {
				return this.$store.state.config.store_switch || 0;
			}
		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	.member-top {
		position: relative;
		width: 100%;
		height: 340upx;
		z-index: 98;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 340upx;
		background-color: rgb(238,85,92);
	}
	
	.headerView1{
		width: 44%;
		height: 100%;
		margin-left: 40upx;
		// background-color: #007AFF;
	}


	
	
	.mainRight button {
	    background: linear-gradient(to right, #fbcb9a, #ae7741);
	    padding: 0 0.3125rem;
	    color: #fff;
	    font-size: 26upx;
	    border-radius: 1.0rem;
	    border: 0;
	    height: 0.875rem;
		
		width: 150upx;
		
		line-height: 60upx;
		
		margin-top: 40upx;
		
		height: 60upx;
		
	}
	
	

	.member-top-c {
		position: absolute;
		// background-color: #007AFF;
		width: 100%;
		top: 120upx;
		display: flex;
		flex-direction: row;
		// height: 200upx;
		text-align: center;
	}

	.user-head-img {
		display: block;
		
		margin-left: 50upx;
		
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
		overflow: hidden;
		background-color: rgba(255, 255, 255, 0.7);
		// margin: 0 auto 16upx;
	}

	.user-name {
		font-size: 40upx;
		color: #fff;
		font-weight: bold;
		text-align: left;
		margin-top : 20upx;
		// background-color: #007AFF;
	}

	.grade {
		font-size: 24upx;
		color: #fff;
		text-align: left;
		margin-top : 10upx;
	}
	
	.cellBox{
		
		position: relative;
		
		width: 690upx;
		
		margin-left: 30upx;
		
		margin-right: 30upx;
		
		// height: 300upx;
		
		border-radius: 10upx;
		
		margin-top: -60upx;
		background: white;
		z-index: 999;
	}
	
	
	.member-grid{
		
		
		
	}
	
	
	
	
	.member-item-text{
		
		width: 100%;
		
		text-align: center;
		
		height: 60upx;
		
		line-height: 60upx;
		
		margin-top: 20upx;
	
		
		font-size: 28upx;
		
		color: #333333;
		
		font-size: 30upx;
		// background-color: #007AFF;
	}
	
	
	.member-item-text2{
		
		width: 100%;
		
		text-align: center;
		
		height: 60upx;
		
		line-height: 60upx;
		
		// margin-top: 20upx;
		
		margin-bottom: 20upx;
	
		
		font-size: 30upx;
		
		color: rgb(238,88,95);
		// background-color: #007AFF;
	}
	

	.margin-cell-group {
		margin: 20upx 0;
		color: #666666;
	}

	.badge {
		left: 80upx;
		top: -6upx;
	}

	button.cell-item-hd {
		background-color: #fff;
		padding: 0;
		line-height: 1.4;
		color: #333;
	}

	button.cell-item-hd:after {
		border: none;
	}

	.login-btn {
		margin-top: 20upx;
		margin-left: 20upx;
		color: #fff;
		width: 200upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 30upx;
		background: #938273;
		font-size: 16px;
	}

	.sale-block {
		padding: 0 20upx;
		margin-bottom: 20upx;

		.sale-title {
			height: 72rpx;
			line-height: 72rpx;
			border-bottom: 2rpx solid #f0f0f0;
			display: flex;
			align-items: center;

			.iconfont {
				margin-right: 12upx;
				color: $theme-color;
			}
		}

		.sale-list {
			justify-content: flex-start;
			flex-wrap: wrap;

			.item {
				width: 25%;
				padding: 20upx 0;

				.iconfont {
					font-size: 40upx;
					color: #5e5e5e;
				}

				.text {
					margin-top: 12upx;
					color: #4d4d4d;
					font-size: 24rpx;
					position: relative;
				}
			}

			.tc {
				text-align: center;

				.cell-hd-icon {
					float: none;
					width: 60rpx;
					height: 60rpx;
					margin: 0;
				}
			}
		}
	}

	.coupon {
		top: -40px;
		left: 50px;
	}
	
	.cellOneLine{
		
		width: 100%;
		
		height: 90upx;
		
		display: flex;
		
		flex-direction: row;
		
		justify-content: space-between;
		
		
	}
	
	.cellOneLineLeft{
		
		width: 70%;
		
		height: 100%;
		
		display: flex;

		flex-direction: row;
		// background-color: #007AFF;
		
	}
	
	.iconimageLeft{
		
		height: 40upx;
		
		width: 40upx;
		
		// mode : ;
		
		margin-left: 40upx;
		
		margin-top:25upx;
		
	}
	
	.iconleftHint{
		
		height: 90upx;
		
		line-height: 90upx;
		
		
		margin-left: 15upx;
		
		color: #333333;
		
		
		
		// background-color: #007AFF;
		
		
	}
	
	.onelinerightTextView{
		
		width: 20%;
		margin-right: 5upx;
		
		line-height: 90upx;
		
		font-size: 28upx;
		
		color: rgb(238,88,95);
		
		text-align: right;
		
	}
	
	
	.btttonView{
		
		margin-top: 80upx;
		
		margin-bottom: 40upx;
		
		display: flex;
		width: 100%;
		
		display: flex;
		display: -webkit-flex;
		   // align-items:center;
		justify-content:center;
		
	   
	
	}
	
	.bt-style{ 
	
		background-repeat:no-repeat;
		background-image:url("../../../static/image/logobuttonjianbian.png"); 
	
		width: 300upx;
		height: 62upx;
		line-height: 62upx;
		color: white;
		
		font-weight: 900;
		
		font-size:30upx;
	
		background-size:100% 100%;
	
	}
	
	.rightViewSmallBox{
		
		display: flex;

		flex-direction: row;

		// background-color: #007AFF;
		
		justify-content: space-between;
		
		align-items: center;
		
		
	}
	

	
</style>

